
#{extends 'master.html' /}
#{set 'title'}
DigitalBand.ru - &{'Product.list.title'}
#{/set}
#{set isCatalogActive:'active' /}
#{set 'moreStyles'}
<link type="text/css" rel="stylesheet" href="@{'/public/javascripts/plugins/carousel/tango/skin.css'}"/>
#{/set}
#{set 'moreScripts'}
<script type="text/javascript" src="@{'/public/javascripts/plugins/carousel/jquery.jcarousel.min.js'}"></script>
<script type="text/javascript" src="@{'/public/javascripts/plugins/jquery.lazyload.mini.js'}"></script>
<script type="text/javascript">
    var position = ${(filter.brandPage-1)*5+1};
    var brandPage = ${filter.brandPage};
    var lastPage = ${brandsPagesCount};
    var pageHolder = new Object();
    function loadBrands(currentPage, carousel, calculateLastPage) {
        if (!pageHolder[currentPage]) {
            $.ajax({
                url:"@{Product.productList(params.excludeBrandPage())}",
                data:{brandPage:currentPage},
                success:function (data) {
                    var brands = $(data).find(".bentry");
                    $.each(brands, function (i) {
                        var index = i + currentPage * 5 + 1;
                        if (!carousel.has(index))
                            carousel.add(index, $(this));
                    });
                    pageHolder[currentPage] = true;
                }
            });
        }
    }
    function mycarousel_itemLoadCallback(carousel, state) {
        var currentPage = carousel.last / 5;
        loadBrands(brandPage + 1, carousel, true);
        if (brandPage > 1) {
            loadBrands(brandPage - 1, carousel);
        }
    }
    function mycarousel_initCallback(carousel) {
        $('.brand_pager_right a').bind('click', function () {
            if (brandPage == lastPage) {
                return false;
            }
            brandPage++;
            carousel.next();
            return false;
        });
        $('.brand_pager_left a').bind('click', function () {
            if (brandPage == 1) {
                return false;
            }
            brandPage--;
            carousel.prev();
            return false;
        });

    }

    jQuery(document).ready(function () {
        //$(".brand_filter").empty();
        $('#brandlist').jcarousel({
            scroll:5,
            size:null,
            start:position + 5,
            offset:position + 5,
            itemLoadCallback:mycarousel_itemLoadCallback,
            initCallback:mycarousel_initCallback,
            buttonNextHTML:null,
            buttonPrevHTML:null });
        $('#brandlist').removeClass("brand_filter");
        $('.jcarousel-container').addClass("brand_filter");
        $("#product_list .lazy-image").lazyload({
            effect:"fadeIn",
            placeholder:"@{Product.defaultImage(115, 90, 'png')}"
        });
    });
</script>
#{/set}
<noscript>
    <style>
        .brand_filter {
            margin-top: 20px;
            margin-left: 40px;
            height: 40px;
            display: inline-block;
        }

        .bcontainer {
            height: 115px;
            overflow: auto;
        }

        .lazy-image {
            display: none;
        }
    </style>
</noscript>
<div class="page-part">
    <div>
        <h3 class="categoryTitle">${category.title}</h3>
    #{if isAdmin}
        <a class="edit-link" href="@{CategoryAdmin.edit(category.id)}">править</a>
    #{/if}
        <div class="clear"></div>
    </div>

#{if siteUrls != null}
    <div class="breadcrumbs">
        <a href="/" class="home_button">&nbsp;</a>
        #{list items:siteUrls.sitePaths, as:'sitePath'}
            #{if sitePath_isFirst}
                <span class="path_separator">&nbsp;</span>
            #{/if}
            <a href="@{Product.productList(params.getFilter(sitePath.filter))}">${sitePath.title}</a>
            #{if !sitePath_isLast}
                <span class="path_separator">&nbsp;</span>
            #{/if}
        #{/list}
    </div>
#{/if}

</div>
<div class="clear"></div>
<div id="product_list" class="plist">
#{if categories.size() > 0}
    <div class="categories-wrapper">
        <ul>
            #{list items:categories, as:'cat'}
                <li class="category-item">
                    <a href="@{Product.productList(params.getCategoryFilter(cat.id))}">
                    ${cat.title.toLowerCase().capFirst()}</a>
                </li>
            #{/list}
        </ul>
    </div>

#{/if}
#{if brands != null}
    <div class="brand_container">
        <div class="brandbar">
            <div class="brand_pager_left">
                <a href="@{Product.productList(params.getBrandPageFilter(filter.brandPage-1))}">
                    &nbsp;</a>
            </div>
            <div class="brand_pager_right">
                <a href="@{Product.productList(params.getBrandPageFilter(filter.brandPage+1))}">
                    &nbsp;</a></div>
        </div>
        <ul id="brandlist" class="brand_filter">
            #{list items:brands, as:'brand'}
                <li>
                    <div class="bentry">
                        #{if brand.hasPicture}
                            <img class="lazy-image" src="@{Product.brandImage(brand.id, 1, 85, 40, 'png')}"
                                 alt="${brand.title}"/>
                        #{/if}
                        #{else}
                            <img class="default-image" src="@{Product.defaultImage(85, 40, 'png')}"
                                 alt="${brand.title}"/>
                        #{/else}

                        <a href="@{Product.productList(params.getBrandFilter(brand.id))}">${brand.title}
                            (${brand.productsCount})
                        </a>
                    </div>
                </li>
            #{/list}
        </ul>

    </div>
#{/if}
#{else}
    #{if selectedBrand != null}
        <div class="brand-title">
            <div class="return-link">
            <a class="go-back" href="@{Product.productList(params.resetBrand())}">
            <span class="back-arrow"></span><span class="brandtitle-text">${selectedBrand.title}</span></a></div>
            #{if selectedBrand.hasPicture}
                <div class="brand_logo">
                    <img class="lazy-image" src="@{Product.brandImage(selectedBrand.id, 1, 85, 40, 'png')}"
                         alt="${selectedBrand.title}"/>
                </div>
            #{/if}
        </div>
    #{/if}
#{/else}
    <div class="clear"></div>
    #{if isAdmin}
    <a href="@{ProductAdmin.createForm(category.id)}">Создать новый товар</a>
    #{/if}
#{if productList.pageCount > 1}
    <div class="pager">
        #{pager
        model:productList,
        action:'Product.list',
        urlParams:urlParams,
        map:params.allSimple() /}
    </div>
#{/if}
    <ol>
    #{list items:productList.items, as:'product' }
        <li class="${product_parity}">
            <div class="pentry">
                <div class="pimage">
                    <a href="@{Product.productList(params.getProductFilter(product.id))}" title="${product.title}"
                       class="image-link">
                        #{if product.hasPicture}
                            <img class="lazy-image" src="@{Product.defaultImage(115, 90, 'png')}"
                                 original="@{Product.productImage(product.id, 1, 115,90, 'png')}" alt=""
                                 class="product-image"/>
                        #{/if}
                        #{else}
                            <img class="default-image" src="@{Product.defaultImage(115, 90, 'png')}" alt=""
                                 class="product-image"/>
                        #{/else}
                        <noscript>
                            <img src="@{Product.productImage(product.id, 1, 115, 90, 'png')}" alt=""
                                 class="product-image"/>
                        </noscript>
                    </a>

                </div>
                #{if product.price > 0}
                    <div class="price">
                        <h4>${product.price.formatPrice("ru-RU")}</h4>

                        #{form @ShoppingCart.add(product.id)}
                            <input type="submit" class="addtocart" value="&{'Product.list.addtocart'}"/>
                        #{/form}
                    </div>
                #{/if}
                <header>
                    <h2 class="entry-title"><a href="@{Product.productList(params.getProductFilter(product.id))}"
                                               title="${product.title}">${product.title}</a>
                    </h2>
                </header>

                <span class="list_description">${product.shortDescription.raw()}</span>


            </div>
        </li>
    #{/list}
    </ol>
#{if productList.pageCount > 1}
    <div class="pager">
        #{pager
        model:productList,
        action:'Product.list',
        urlParams:urlParams,
        map:params.allSimple() /}
    </div>
#{/if}
</div>


<div class="clear"></div>


